<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box"></div>
    <div class="container"></div>
    <script>
        // 增 、删、改、查；
        // 查 获取各种元素；
        // 一、增加元素：创建元素；
        // 获取元素；
        // var boxEle = document.querySelector(".box");
        // boxEle.innerHTML = `123`;
        // console.log(boxEle);
        // 直接创建一个元素对象；
        // var ele = document.createElement("div");
        // ele.innerHTML = "hello";
        // ele.className = "active";
        // console.log(ele);

        // // 把元素对象添加到指定位置   父级元素.appendChild(“元素对象”);

        // var containerEle = document.querySelector(".container");
        // document.onclick = function () {
        //     var p = document.createElement("p");
        //     p.innerHTML = "我是p标签";
        //     containerEle.appendChild(ele);
        //     containerEle.appendChild(p);
        // }


        // 二、创建文本对象；createTextNode() :了解
            // 创建一个文本对象
            // var text = document.createTextNode("1111");
            // console.log(text);
            // 创建一个div元素
            // var div = document.createElement("div");
            // div.innerHTML = "1111"; //多数情况下都会用innerHTML或者是innerText来替代
            // div.appendChild(text);
            // console.log(div);
            // document.body.appendChild(div);


        // 三 、innerHTML 和 appendChild的区别
        var containerEle = document.querySelector(".container");

        // containerEle.innerHTML = `<div>1111</div>`;

        var div = document.createElement("div");
        div.innerHTML = "1111";
        // containerEle.appendChild(div);

        // containerEle.innerHTML = div; 错误的写法；
        // 1.innerHTML赋值操作 ，后面内容是字符串或者是数字；
        //  2.appendChild是函数执行的写法 ，appendChild添加的内容是对象类型

        // 通过createElement 创建一个table表格；
    </script>
</body>

</html>